/**
 * webpack的配置文件
 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const EsLintPlugin = require('eslint-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
  // 打包模式
  // mode: 'development',
  // 入口配置
  entry: './src/index.js',
  // 出口配置
  output: {
    // 打包文件路径
    path: path.resolve(__dirname, 'dist'),
    // 打包文件名
    filename: 'bundle.js'
  },
  // Loader执行顺序：先右后左，先下后上
  module: {
    rules: [
      // {
      //   test: /\.css$/i,
      //   use: ['style-loader', 'css-loader']
      // },
      // {
      //   test: /\.css$/i,
      //   use: [MiniCssExtractPlugin.loader, 'css-loader']
      // },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          // 通过postcss-loader给样式属性添加浏览器前缀
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../'
          }
        },
        {
          loader: 'css-loader',
          options: {
            esModule: false
          }
        },
          // 通过postcss-loader给样式属性添加浏览器前缀
          'postcss-loader',
          'less-loader']
      },
      {
        test: /\.(png|gif|jpe?g)$/i,
        // use: {
        //   loader: 'url-loader',
        //   options: {
        //     // 指定图片大小，小于该数值的图片，会被转成base64
        //     limit: 800 * 1024,// 8kb
        //     // name是图片原来的名称，ext是图片原来的后缀名
        //     name: 'image/[name].[ext]',
        //     esModule: false
        //   }
        // }
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 指定图片大小，小于该数值的图片，会被转成base64
            maxSize: 8 * 1024
          }
        },
        generator: {
          // name是图片原来的名称，ext是图片原来的后缀名,ext本身自己带`.`
          filename: 'image/[name][ext]'
        }
      },
      {
        test: /\.(htm|html)$/i,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        test: /\.m?js$/i,
        exclude: /node_modules/, // 排除不需要打包的⽬录
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env', {
                  // 按需加载
                  useBuiltIns: 'usage',
                  corejs: 3,
                  // targets: 'defaults'
                  // 指定浏览器兼容的版本
                  targets: {
                    chrome: '58',
                    ie: '9',
                    firefox: '60',
                    safari: '10',
                    edge: '17'
                  }
                }
              ]
            ]
          }
        }
      }
    ]
  },
  // 开发服务器
  devServer: {
    // 指定加载内容的路径
    static: {
      directory: path.resolve(__dirname, 'dist')
    },
    // 启用gzip压缩
    compress: true,
    // 指定端口号
    port: 9200,
    //  启用自动更新，（禁用hot）
    liveReload: true,
    // 配置代理,解决接口跨域问题
    proxy: {
      "/api": {
        // http://localhost:9200/api ----> https://api.github.com/api
        target: 'https://api.github.com',
        // http://localhost:9200/api ----> https://api.github.com/
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true,
        open: true
      }
    }
  },
  // [name]：表示不改变默认值， 也可以直接指定：css/myMain.css
  plugins: [
    new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
    new EsLintPlugin({
      // 自动解决常规的代码报错问题
      fix: true
    }),
    // 打包之前，先删除历史文件
    new CleanWebpackPlugin()
  ]
}